<template>
  <div class="details">
    <Card>
      <Row type="flex"
           justify="end">
        <Button @click="close">返回</Button>
      </Row>
      <Divider>订单详情</Divider>
      <Row class="more">
        <Col :span="6"><b>状态：</b> <span :style="{color: orderStatusColor(order.status)}">{{order.status | orderStatus}}</span> </Col>
        <Col :span="6"><b>下单时间：</b> {{order.createTime | filtersTime}}</Col>
        <Col :span="6"><b>订单单号：</b> {{order.tradeNo}}</Col>
        <Col :span="6"><b>订单类型：</b> <span :style="{color: order.type ? '#ed4014' : '#19be6b'}">{{order.type ? '卖单' : '买单'}}</span></Col>
      </Row>
      <Row class="more">
        <Col :span="6">
        <div class="coinId">
          <b>币种：</b>
          <img class="coinId-img"
               :src="require('../../assets/images/coin/'+order.coinId+'.png')"
               alt="">
          <span>{{order.coinId}}</span>

        </div>
        </Col>
        <Col :span="6"><b>交易数量：</b> {{order.amount}} {{order.coinId}}</Col>
        <Col :span="6"><b>成交单价：</b> {{order.price}}</Col>
        <Col :span="6"><b>订单总价：</b> {{order.total}}</Col>
      </Row>
      <Row class="more">
        <Col span="6"><b>成交手续费：</b> {{order.fee}} {{order.coinId}}</Col>
        <Col span="6"><b>手续费费率：</b> {{order.feeRate * 100}}%</Col>
      </Row>
      <Divider />
      <Row class="more">
        <Col span="6"><b>卖方账号：</b> {{order.account}}</Col>
      </Row>
      <Row class="more"
           v-if="order.receiverName">
        <Col span="6"><b>收款方式：</b> {{order.receiverType | receiverType}}</Col>
        <Col span="6"><b>收款人：</b> {{order.receiverName}}</Col>
        <Col span="6"><b>收款账户：</b> {{order.receiverNum}}</Col>
      </Row>
      <Row class="more"
           v-else
           v-for="(item, index) in order.payments"
           :key="index">
        <Col span="6"><b>收款方式：</b> {{item.type | receiverType}}</Col>
        <Col span="6"><b>收款人：</b> {{item.name}}</Col>
        <Col span="6"><b>收款账户：</b> {{item.num}}</Col>
        <Col span="6"
             v-if="item.qrcode">
        <Tooltip placement="top"
                 transfer>
          <a href="javascript:void(0)">{{item.type | receiverType}} 收款码
            <Icon type="md-image" /></a>
          <div slot="content"
               class="receiverTypeTip-img">
            <img :src="imgUrl + item.qrcode"
                 alt="">
          </div>
        </Tooltip>
        </Col>
      </Row>
    </Card>
  </div>
</template>

<script>
import config from '@/config'
import { mapMutations, mapGetters } from 'vuex'

export default {
  name: 'query',
  data () {
    return {
      imgUrl: config.baseUrl.imgurl,
      pageId: this.$route.query.id,
      order: {}
    }
  },
  filters: {
    orderStatus (val) {
      switch (val) {
        case 0:
          return '待打款'
        case 1:
          return '待放行'
        case 2:
          return '交易完成'
        case 3:
          return '被投诉'
        case 4:
        case 5:
          return '已取消'
        case 6:
          return '待处理订单'
      }
    },
    filtersTime (val) {
      return new Date(val + 8 * 3600 * 1000).toJSON()
        .substr(0, 19)
        .replace('T', ' ')
        .replace(/-/g, '-')
    },
    receiverType (val) {
      switch (val) {
        case '0':
          return '支付宝'
        case '1':
          return '微信'
        case '2':
          return '银行卡'
      }
    }
  },
  watch: {
    '$route' (to, from) {
      this.pageId = to.query.id
      this.gttInfo()
    }
  },
  computed: {
    ...mapGetters(['getOrterDetails'])
  },
  created () {
    this.gttInfo()
  },
  methods: {
    ...mapMutations([
      'closeTag'
    ]),
    gttInfo () {
      this.order = { ...this.order, ...this.getOrterDetails['o' + this.pageId] }
      if (!this.order.tradeNo) {
        this.closeTag({
          name: 'sellOrderDetails',
          query: {
            id: this.pageId
          }
        })
      }
    },
    close () {
      this.$router.back(-1)
    },
    orderStatusColor (val) {
      switch (val) {
        case 0:
          return '#CB4C66'
        case 1:
          return '#2CB98E'
        case 2:
          return '#333333'
        case 3:
          return '#FF9C00'
        case 4:
        case 5:
          return '#999999'
        case 6:
          return '#red'
      }
    }
  }
}
</script>

<style lang="less">
.details {
  .more {
    margin-bottom: 20px;
  }
  .coinId {
    display: flex;
    align-items: center;
    &-img {
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }
  }
}
</style>
